<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<!-- 
vue事件处理
    v-on:事件名称="表达式"
    表达式可以是一个常量，也可以是一个js表达式，Vue实例所管理的xxx
    eg： v-on：click="aa"

在Vue当中，所有事件关联的回调函数，需要在Vue中的methods选项中定义

简写形式：
    eg： v-on：click="aa" ======  @click="aa"
         v-on：keydown="bb" ======  @keydown="bb"

绑定的回调函数,如果函数调用时不需要传递任何参数，小括号（ ）可以省略

Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是当前发生的事件对象
在绑定回调函数的时候，可以在回调函数的参数上使用 $event占位符，Vue框架看到这会自动将当前的事件以对象的形式传过去

-->
<body>
    <div id="app">
        
        <h1>{{msg}}</h1>
        <button onclick="alert('hello')">hello</button>
        <br>
         <button v-on:click="aaa('hhhhhhhhhh')">按钮0</button>
         <button @click="aaa">按钮</button>


    
    </div>
    
    <script>
        const vm = new Vue({
          el: '#app',
          data : {
              msg:"shijianbangding"
          },
          methods: {
            aaa(e){
                // alert("hello")
                console.log(e);
                
            },
            bbb(e){
                console.log(e);            
                alert("hello")

            }
            }
        })
    </script>
</body>
</html>